<template>
	<view class="comment">
		<view class="" style="height: 10px;background-color: #eee;"></view>
		<u-sticky v-if="!moreVisible">
			<view class="comment__head" id="comment" >
				<view class="comment__head--left">
					<u-tabs :current="current" :list="list" @click="menuClick"></u-tabs>
				</view>
				<view class="comment__head--right">
					<view :class="['comment__head--right-item',('sub' + index),item.id == subId ? 'sub-active' : '']" v-for="(item,index) in subMenu" :key="index" @click="changeSubMenu(item)">{{item.name}}</view>
				</view>
			</view>
		</u-sticky>
		<view class="comment__body" 
			:comment="comment"
			:currentComment="currentComment"
			:change:comment="commentjs.listChange"
			:change:currentComment="commentjs.currentCommentChange"
			>
			<view class="more" v-show="moreVisible" @click="showMore">查看全部评论</view>
			<view class="comment-card" :class="item.Id == id && showAnimation && !init ? 'bg-active' : ''" v-for="item in comment" :key="item.Id">
				<view class="comment-card__jiedian" :id="'i' + item.Id"></view>
				<view class="comment-card__set" @click="clickSet(item)">
					<image src="@/static/theme/default/home/more.png" mode=""></image>
				</view>
				<view class="comment-card__left">
					<view class="comment-card__left--avator" @click="goHomePage(item)">
						<avator :avator="item.avator" :name="item.CreateUser"></avator>
					</view>
				</view>
				<view class="comment-card__right">
					<view class="comment-card__right--name">
						<text @click="goHomePage(item)">{{item.CreateUser}}</text>
					</view>
					<view class="comment-card__right--floor">
						<text @click="goHomePage(item)">{{item.ReplyFloor}}F</text>
					</view>
					<view class="comment-card__right--content" :id="'content' + item.Id" v-html="item.content"></view>
					<view class="replay" v-show="item.comments && item.comments.length" @click="userCommentClick(item)">
						<view class="replay__item" v-for="v in item.comments" :key="v.Id">
							<text class="replay__item--create-user">
								<text>{{v.CreateUser}}</text>
								<text class="owner" v-show="v.CreateUser == data.owner">楼主</text>
							</text>
							<text class="replay__item--receive-user" v-show="v.ReceiveUser">
								<text style="margin: 0 10rpx;color: #000;">回复</text>
								<text>{{v.ReceiveUser}}</text>
								<text  class="owner" v-show="v.ReceiveUser == data.owner">楼主</text>
							</text>
							<text>：</text>
							<text class="replay__item--content" v-html="v.content"></text>
						</view>
						<view class="replay__more" v-show="item.ReplyCount > 2*1">全部{{item.ReplyCount}}条评论></view>
					</view>
					<view class="comment-card__right--bottom">
						<view class="comment-card__right--bottom__left">{{item.CreateTime}}</view>
						<view class="comment-card__right--bottom__right">
							<view class="comment-card__right--bottom__right--item" @click="commentOther(item)">
								<image src="@/static/theme/default/home/comment/comment.png" mode=""></image>
								<view class="">回复</view>
							</view>
							<view class="comment-card__right--bottom__right--item" @click="commentLike(item)">
								<image src="@/static/theme/default/home/comment/dianzhan.png" mode="" v-if="!item.isCommentLike"></image>
								<image :class="['animated',(item.isCommentLike ? 'jackInTheBox' : '')]" src="@/static/theme/default/home/comment/dianzhan_active.png" mode="" v-else></image>
								<view class="" :style="{color: item.isCommentLike ? '#e16531' : ''}">{{setLikeNum(item)}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-more" v-show="isNoMore">
				--没有更多了--
			</view>
			<no-data v-if="isNoData"></no-data>
		</view>
		
		<view class="" style="height: 120rpx;"></view>
		
		<pop-box>
			<u-popup mode="bottom" :round="20" zIndex="999999" closeOnClickOverlay :show="setPopVisible" @close="hideSet" @open="setPopVisible = true">
				<view class="set-pop">
					<view class="set-pop__head">管理</view>
					<view class="set-pop__body">
						<view class="set-pop__item" @click="delComment" v-show="currentComment.CreatePxid == pxid">
							<view class="set-pop__item--icon">
								<image src="@/static/theme/default/home/comment/shanchu.png" mode=""></image>
							</view>
							<view class="set-pop__item--text">删除</view>
						</view>
						<view class="set-pop__item" @click="commentjs.comment_copy">
							<view class="set-pop__item--icon">
								<image src="@/static/theme/default/home/comment/copy.png" mode=""></image>
							</view>
							<view class="set-pop__item--text">复制</view>
						</view>
					</view>
					<view class="set-pop__bottom" @click="hideSet">取消</view>
				</view>
			</u-popup>
		</pop-box>
		
		<u-popup :round="10" mode="center" :show="linkVisible" @close="linkVisible = false" @open="linkVisible = true">
			<view class="link">
				<view class="link__item" @click="copyLink">复制链接</view>
				<view class="link__item" @click="goLink">跳转到链接</view>
			</view>
		</u-popup>
		
		<nav-bar :show="commentVisible" :title="title" :type="type" :menu="menu" @submit="submit" @close="close"/>
		<comment-pop :show="userCommentVisible" :data="userCommentData" @close="userCommentClose"></comment-pop>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment';
	import {timestampFormat,entitiestoUtf16,image_cache} from '@/common/custom_util.js'
	import Avator from '@/components/custom/avator/avator.vue'
	import PopBox from '@/components/custom/pop-box/index.vue'
	import NavBar from '@/components/custom/navbar/navbar.vue'
	import NoData from '@/components/custom/no-data/no-data.vue'
	import CommentPop from './comment-pop.vue'
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	import uniCopy from '@/common/uni-copy.js';
	import emoji_default from '@/static/js/message/emoji_data.js';
	import emoji_jxp from '@/static/js/jxp.js';
	
	export default {
		components: {
			NavBar,Avator,PopBox,CommentPop,NoData,
		},
		mixins: [ZPMixin],
		data() {
			return {
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				static_avator: _data.data('static_url'),
				emojiDic: emoji_default.emoji_dic,
				jxpDic: emoji_jxp.jxp_dic,
				list: [
					{
						name: '全部评论'
					},
					{
						name: '只看楼主'
					},
				],
				current: 0,//0:全部评论，1:只看楼主
				subMenu: [
					{
						order: 'Score',
						asc: 'desc',
						name: '热门',
						id: 1
					},
					{
						order: 'CreateTime',
						asc: 'asc',
						name: '最早',
						id: 2
					},
					{
						order: 'CreateTime',
						asc: 'desc',
						name: '最新',
						id: 3
					},
				],
				subId: 1,
				order: 'Score',
				asc: 'desc',
				comment: [],
				scrollTop: 0,
				setPopVisible: false,
				currentComment: {},//待删除的评论
				commentVisible: false,
				menu: [],
				title: '发表评论',
				type: 'user-comment',
				user: {},
				userCommentVisible: false,//用户评论
				userCommentData: {
					topicid: '',
					floorid: ''
				},
				currentpage: 1,
				pagesize: 10,
				init: false,//初始化判断
				showAnimation: false,//动画是否执行
				moreVisible: true,//显示全部
				isNoData: false,
				timer: null,
				isNoMore: false,
				linkVisible: false
			}
		},
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			router: {
				type: String,
				required: true,
				default: ''
			},
			id: {
				type: String,
				default: ''
			}
		},
		watch: {
			comment: {
				deep: true,
				handler() {
					this.isNoData = !this.comment.length ? true : false;
				}
			},
			data: {
				deep: true,
				handler() {
					this.initPage();
				}
			}
		},
		created() {
			uni.$on('getData',v => {
				let that = this;
				if(this.order == 'Score' || this.order == 'CreateTime') {//热门回复后刷新
					this.initPage();
					return
				}
				if(this.isNoMore) {
					this.getTopicReplyList().then(res => {
						let flag = false;
						res.forEach(item => {
							if(item.Id == v) {
								flag = true;
							}
						})
						if(!flag) {
							++that.currentpage;
							that.getTopicReplyList().then(result => {
								let flag2 = false;
								result.forEach(item => {
									if(item.Id == v) {
										flag2 = true;
									}
								})
								if(flag2) that.setData(result)
							})
						} else {
							that.setData(res)
						}
					})
				}
			})
			uni.$on('scrollToComment',() => {
				this.scrollToComment();
			})
			uni.$on('scrolltolower',() => {
				if(this.isNoMore) return
				this.getData();
			});
		},
		destroyed() {
			uni.$off('getData')
			uni.$off('scrollToComment')
			uni.$off('scrolltolower')
			if(this.timer) {
				clearInterval(this.timer);
				this.timer = null;
			}
		},
		methods: {
			/**
			 * 初始化分页参数
			 */
			initPage() {
				this.comment = [];
				this.pagesize = 10;
				this.currentpage = 1;
				this.isNoMore = false;
				this.getData();
			},
			/**
			 * 请求接口
			 */
			getData() {
				let that = this;
				let api = '';
				if(!this.id) {
					this.moreVisible = false;
					api = 'getTopicReplyList'; 
				} else {
					if(this.moreVisible) {
						api = 'getTopicReplyAroundList';
					} else {
						api = 'getTopicReplyList';
					}
				}
				this[api]().then(res => {
					if(res.length == this.pagesize) ++this.currentpage;
					that.setData(res)
					if(res.length < this.pagesize && that.comment.length) {
						this.isNoMore = true;
					};
				})
			},
			/**
			 * 处理返回数据
			 */
			setData(dataList) {
				let that = this;
				let ids = [];
				let list = [];
				dataList.forEach(item => {
					item.avator = that.static_avator + "/static/photo/user/" + item.CreatePxid + "/70.jpg";
					let content = entitiestoUtf16(item.ReplyContent);
					content = content.replace(/%22/g,"\"");
					item.content = this.replaceEmoji(content);
					item.isCommentLike = item.MyLikesCount == '1' ? true : false;
					item.CreateTime = timestampFormat(item.CreateTime);
					ids.push(item.Id);
					
					let flag = false;
					that.comment.forEach(v => {
						if(item.Id == v.Id) {
							flag = true;
						}
					})
					if(!flag) list.push(item)
				})
				if(ids.length) {
					that.getTopicReplyListSub(ids.join(',')).then(result => {
						dataList.forEach(item => {
							let comments = [];
							result.forEach(v => {
								if(item.FloorId == v.FloorId) {
									let content = entitiestoUtf16(v.ReplyContent);
									content = content.replace(/%22/g,"\"");
									v.content = this.replaceEmoji(content);
									comments.push(v)
								}
							})
							that.$set(item,'comments',comments)
						})
					})
				}
				that.comment.push(...list);
			},
			/**
			 * 创建主题回复
			 */
			addTopicReply(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicReply',
						apiparam: apiparam,
						success(res) {
							if(res.length) that.data.topicId = res[0].TopicId;
							resolve(res)
						}
					})
				})
			},
			/**
			 * 创建主题点赞
			 */
			addTopicLikes(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicLikes',
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 创建主题艾特相关人数据
			 */
			addTopicAt(apiparam) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'addTopicAt',
						code: 13,
						apiparam: apiparam,
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 获取主题回复列表信息
			 */
			getTopicReplyList() {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getTopicReplyList',
						pagesize: this.pagesize,
						currentpage: this.currentpage,
						apiparam: {
							topicid: this.data.topicId,
							obsusername: this.obsusername,
							obspxid: this.pxid,
							ownerreply: this.current,
							order: this.order,
							asc: this.asc
						},
						success(res) {
							resolve(res)
						}
					})
				})
			},
			/**
			 * 获取从回复消息列表跳转到第一层回帖列表，展示包括当前回复在内的15条信息
			 */
			getTopicReplyAroundList() {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getTopicReplyAroundList',
						apiparam: {
							topicid: this.data.topicId,
							replyid: this.id,
							obsusername: this.obsusername,
							obspxid: this.pxid,
						},
						success(res) {
							resolve(res)
							if(that.id && !that.init) {
								that.$nextTick(function() {
									setTimeout(() => {
										that.$emit('hasResult','i' + that.id)
										setTimeout(() => {
											that.showAnimation = true;
										},500)
									},1000)
								});
							}
						}
					})
				})
			},
			/**
			 * 获取主题回复楼层的最早的两个回复
			 */
			getTopicReplyListSub(replyidlist) {
				let that = this;
				return new Promise(resolve => {
					_custom.getDataJava({
						apiname: 'getTopicReplyListSub',
						apiparam: {
							replyidlist: replyidlist
						}, 
						success(res) {
							resolve(res);
						}
					})
				})
			},
			/**
			 * 根据Id获取单个楼层回复
			 */
			getTopicReplyListById(replyid) {
				let that = this;
				return new Promise((resolve, reject) => {
					_custom.getDataJava({
						apiname: 'getTopicReplyListById',
						apiparam: {
							replyid: replyid,
							obsusername: this.obsusername,
							obspxid: this.pxid,
						},
						success(res) {
							if(res.length) {
								resolve(res[0])
							}
						}
					})
				})
			},
			/**
			 * 删除回复（级联）
			 */
			flagDelTopicReply() {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDelTopicReply',
					code: 2,
					apiparam: {
						replyid: this.currentComment.Id,
						obsusername: this.obsusername,
						obspxid: this.pxid
					},
					success(res) {
						if(that.id) {
							that.comment.forEach((item,index) => {
								if(item.Id == that.currentComment.Id) {
									that.comment.splice(index,1)
								}
							})
						} else {
							that.initPage()
						}
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					},
					fail() {
						uni.showToast({
							title: '删除失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 提交评论
			 * @param {Object} v
			 */
			submit(v) {
				let that = this;
				let text = v.value.text;
				let users = v.value.users;
				let factorys = v.value.factorys;
				let images = v.value.images;
				this.addTopicReply({
					topicid: this.data.topicId,
					topicrouter: this.router,
					businessid: this.data.businessId,
					owner: this.data.owner,
					ownerpxid: this.data.ownerPxid,
					replyid: this.user.Id,
					createuser: this.obsusername,
					createpxid: this.pxid,
					replycontent: text,
					replyimages: images.join(',')
				}).then(res => {
					uni.showToast({
						title: '评论成功',
						icon: 'none'
					})
					Promise.all([this.getTopicReplyListSub(this.user.Id),this.getTopicReplyListById(this.user.Id)]).then(res => {
						let subList = res[0];
						let sub = res[1];
						that.comment.forEach(item => {
							if(item.Id == that.user.Id) {
								subList.forEach(v => {
									let content = entitiestoUtf16(v.ReplyContent);
									content = content.replace(/%22/g,"\"");
									v.content = this.replaceEmoji(content);
								})
								that.$set(item,'comments',subList)
								that.$set(item,'ReplyCount',sub.ReplyCount)
							}
						})
					})
					if(res.length && users.length) {
						let replyid = res[0].ReplyId;
						let topicId = res[0].TopicId;
						let params = [];
						let timestamp = (new Date()).valueOf();
						users.forEach(item => {
							params.push({
								topicid: topicId,
								replyid: replyid,
								batchid: timestamp,
								createuser: this.obsusername,
								createpxid: this.pxid,
								atusername: item.pname,
								atuserpxid: item.pxid,
							})
						})
						factorys.forEach(item => {
							params.push({
								topicid: topicId,
								replyid: replyid,
								batchid: timestamp,
								createuser: this.obsusername,
								createpxid: this.pxid,
								atobscode: item.OBSCODE,
							})
						})
						this.addTopicAt(params)
					}
				})
			},
			/**
			 * 评论点赞
			 */
			commentLike(v) {
				this.$set(v,'isCommentLike',!v.isCommentLike);
				let LikesCount = v.LikesCount*1;
				if(v.isCommentLike) {
					LikesCount = ++LikesCount;
				} else {
					LikesCount = --LikesCount;
				}
				let MyLikesCount = v.MyLikesCount == '1' ? '0' : '1';
				this.$set(v,'LikesCount',LikesCount);
				this.$set(v,'MyLikesCount',MyLikesCount);
				this.addTopicLikes({
					topicid: this.data.TopicId,
					topicrouter: this.router,
					businessid: this.data.businessId,
					owner: this.data.owner,
					ownerpxid: this.data.ownerPxid,
					replyid: v.Id,//点赞别人的留言传留言id
					createuser: this.obsusername,
					createpxid: this.pxid,
					flag: v.isCommentLike ? 0 : 1,
				})
			},
			/**
			 * 评论回复
			 * @param {Object} v
			 */
			commentOther(v) {
				this.user = v;
				this.type = 'user-comment';
				this.menu = [0,2];
				this.title = '回复' + v.CreateUser;
				this.commentVisible = true;
				this.$emit('preventScroll')
			},
			/**
			 * 切换菜单
			 * @param {Object} e
			 */
			menuClick(e) {
				this.current = e.index;
				this.initPage()
			},
			/**
			 * 切换热门、最早、最新
			 */
			changeSubMenu(v) {
				this.order = v.order;
				this.asc = v.asc;
				this.subId = v.id;
				this.initPage()
			},
			hideSet() {
				this.setPopVisible = false;
				this.$emit('showBottom')
			},
			/**
			 * 点击设置图标
			 * @param {Object} v
			 */
			clickSet(v) {
				this.currentComment = v;
				this.setPopVisible = true;
				this.$emit('hideBottom')
			},
			/**
			 * 删除评论
			 */
			delComment(v) {
				let that = this;
				this.$emit('showBottom')
				this.setPopVisible = false;
				uni.showModal({
					title: '提示',
					content: '确认要删除该评论吗？',
					confirmText: '删除',
					success(res) {
						if(res.confirm) {
							that.flagDelTopicReply()
						}
					},
					complete() {
						that.$emit('showBottom')
					}
				})
			},
			/**
			 * 复制文字
			 * @param {Object} v
			 */
			copy(v) {
				if(!v) {
					uni.showToast({
					  title:'只能复制文字信息',
					  icon:'none'
					}) 
					return
				}
				const result = uniCopy(v)
				  if (result === false) {
					uni.showToast({
					  title:'复制失败',
					  icon:'none'
					})
				  } else {
					uni.showToast({
					  title:'复制文字成功',
					  icon:'none'
					})
				  }
				this.$emit('showBottom')
				this.setPopVisible = false;
			},
			/**
			 * 设置赞的数量
			 * @param {Object} v
			 */
			setLikeNum(v) {
				if(v.LikesCount != '0') return v.LikesCount
				if(v.LikesCount == '0') return '赞'
			},
			/**
			 * 设置赞的数量
			 * @param {Object} v
			 */
			setThemeLikeNum(v) {
				if(v.LikesCount != '0') return v.LikesCount
				if(v.LikesCount == '0') return '赞'
			},
			/**
			 * 弹窗关闭
			 */
			close() {
				this.commentVisible = false;
				this.$emit('allowScroll')
			},
			/**
			 * 楼层弹窗显示
			 */
			userCommentClick(v) {
				this.userCommentData = {
					topicid: v.TopicId,
					floorid: v.FloorId,
					id: v.Id
				};
				this.userCommentVisible = true;
				this.$emit('preventScroll')
			},
			/**
			 * 楼层弹窗关闭
			 */
			userCommentClose() {
				Promise.all([this.getTopicReplyListSub(this.userCommentData.id),this.getTopicReplyListById(this.userCommentData.id)]).then(res => {
					let subList = res[0];
					let sub = res[1];
					this.comment.forEach(item => {
						if(item.Id == this.userCommentData.id) {
							subList.forEach(v => {
								let content = entitiestoUtf16(v.ReplyContent);
								content = content.replace(/%22/g,"\"");
								v.content = this.replaceEmoji(content);
							})
							this.$set(item,'comments',subList)
							this.$set(item,'ReplyCount',sub.ReplyCount)
						}
					})
				})
				this.userCommentVisible = false;
				this.$emit('allowScroll')
			},
			/**
			 * 查看全部回复
			 */
			showMore() {
				this.moreVisible = false;
				this.init = true;
				this.getData();
			},
			/**
			 * 跳转到主页
			 * @param {Object} e
			 */
			goHomePage(v) {
				uni.$emit('goCommentHomePage',{
					name: v.CreateUser,
					pxid: v.CreatePxid,
					avator: v.avator,
				});
			},
			/**
			 * 点击链接
			 * @param {Object} v
			 */
			clickLink(v) {
				this.linkVisible = true;
				this.link = v;
			},
			/**
			 * 跳转链接
			 */
			goLink() {
				uni.navigateTo({
					url: '/pages/push/web?url=' + this.link,
				});
				this.linkVisible = false;
			},
			/**
			 * 复制链接
			 */
			copyLink() {
				uni.setClipboardData({
					data: this.link,
					showToast: true
				});
				this.linkVisible = false;
			},
			/**
			 * 点击艾特
			 */
			clickAt(v) {
				let data = {
					name: v.pname,
					pxid: v.pxid,
				}
				uni.navigateTo({
					url: '/pages/community/homepage?data=' + JSON.stringify(data)
				})
			},
			/**
			 * 预览图片
			 * @param {Object} v
			 */
			preview(v) {
				uni.previewImage({
					urls: v.urls,
					current: v.index
				})
			},
			/**
			 * 获取dom信息
			 * @param {Object} id
			 * @param {Object} fn
			 */
			getDomData(id,fn) {
				const query = uni.createSelectorQuery().in(this);
				query.select(id).fields({
					id: true,
					size: true,
					rect: true,
					scrollOffset: true
				},data => {
				  fn(data)
				}).exec();
			},
			/**
			 * 滚动到评论区
			 */
			scrollToComment() {
				let that = this;
				if(this.timer) return
				this.timer = setInterval(() => {
					if(that.comment.length) {
						if(this.timer) {
							clearInterval(this.timer);
							this.timer = null;
						}
						that.$nextTick(function() {
							setTimeout(() => {
								that.$emit('scrollToComment','i' + that.comment[0].Id);
							},300)
						});
					}
				},100)
			},
			//替换表情符号为图片
			replaceEmoji(str) {
				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
					let key = item;
					let defaultValue = this.emojiDic[key] ? this.emojiDic[key].url : '';
					let jxpValue = this.jxpDic[key] ? this.jxpDic[key].url : '';
					let imgstr = '';
					if(defaultValue) {
						// #ifdef H5
						imgstr = '<img class="comment-default pic comment-emoji" style="width:22px;height:22px;" src="' + _data.data('static_url') + '/static/emoji/' + this.emojiDic[key].url + '">';
						// #endif
						// #ifdef APP-PLUS
						let url = plus.io.convertLocalFileSystemURL('_www/static/img/emoji/' + this.emojiDic[key].url);
						imgstr = '<img class="comment-default pic comment-emoji" style="width:22px;height:22px;" src="' + url + '">';
						// #endif
						return imgstr;
					} else if(jxpValue) {
						// #ifdef H5
						imgstr = '<img class="comment-jxp pic comment-emoji" style="width:100px;height:100px;" src="' + _data.data('static_url') + '/static/emoji/jxp/' + this.jxpDic[key].url + '.gif">';
						// #endif
						// #ifdef APP-PLUS
						let url = plus.io.convertLocalFileSystemURL('_www/static/img/jxp/gif/' + this.jxpDic[key].url + '.gif');
						imgstr = '<img class="comment-jxp pic comment-emoji" style="width:100px;height:100px;" src="' + url + '">';
						// #endif
					}
					return imgstr;
				});
				replacedStr = replacedStr.replace(/(\r\n)|(\n)/g, '<br/>');
				return replacedStr;
			},
		}
	}
</script>

<script module="commentjs" lang="renderjs">
	import {
		js_image_cache,formatImg
	} from '@/common/custom_util.js';
	import _data from '@/common/_data.js'
	
	export default {
		data() {
			return {
				currentComment: {},
			}
		},
		mounted() {
			
		},
		methods: {
			currentCommentChange(newVal,oldVal,ownerInstance) {
				this.currentComment = newVal;
			},
			comment_copy(event, ownerInstance) {
				let box = document.getElementById("content" + this.currentComment.Id);
				let text = box.innerText;
				ownerInstance.callMethod('copy',text)
			},
			listChange(newVal,oldVal,ownerInstance) {
				let box = document.getElementsByClassName("comment-card__right--content")[0];
				if(!box) return
				let imgEles = document.getElementsByClassName("img");//图片
				let atEles = document.getElementsByClassName("comment-at");
				let urlEles = document.getElementsByClassName("comment-url");
				let imgs = [];
				//保存所有图片到数组
				for (let i = 0; i < imgEles.length; i++) {
					let item = imgEles[i];
					let src = formatImg(item.dataset.key,false)
					imgs.push(src);
				}
				// // #ifdef APP-PLUS
				// if(imgEles.length) {
				// 	for (let i = 0; i < imgEles.length; i++) {
				// 		let item = imgEles[i];
				// 		if(item.dataset.key) {
				// 			let index = item.dataset.key.indexOf('homepage');
				// 			let name = item.dataset.key.substring(index);
				// 			let extensionIndex = item.dataset.key.lastIndexOf('.');
				// 			let extension = item.dataset.key.substring(extensionIndex);
				// 			if(extension == '.gif') {
				// 				let src = item.dataset.key.replace('_minPic','');
				// 				js_image_cache(src,name,res => {
				// 					item.src = res;
				// 				})
				// 			} else {
				// 				js_image_cache(item.dataset.key,name,res => {
				// 					item.src = res;
				// 				})
				// 			}
				// 			item.dataset.key = '';
				// 		}
				// 	}
				// }
				// // #endif
				// // #ifdef H5
				// for (let i = 0; i < imgEles.length; i++) {
				// 	let item = imgEles[i];
				// 	if(item.dataset.key) {
				// 		let index = item.dataset.key.lastIndexOf('.');
				// 		let extension = item.dataset.key.substring(index);
				// 		if(extension == '.gif') {
				// 			let src = item.dataset.key.replace('_minPic','');
				// 			item.src = src;
				// 			continue
				// 		}
				// 	}
				// }
				// // #endif
				
				if(imgEles.length) {
					for (let i = 0; i < imgEles.length; i++) {
						let item = imgEles[i];
						item.src = formatImg(item.dataset.key,false);
						item.onload = function() {
							item.setAttribute('style', 'opacity: 1;');
						}
						item.onerror = function(e) {
							let url = '';
							// #ifdef APP-PLUS
							url = plus.io.convertLocalFileSystemURL('_www/static/img/load_err.png');
							// #endif
							// #ifdef H5
							url = '/static/img/load_err.png';
							// #endif
							this.onerror = null;
							this.src = url;
						}
						
						let w = '';
						let h = '';
						if(box.clientWidth < item.width) {
							w = box.clientWidth;
							h = item.height / item.width * box.clientWidth;
						} else {
							w = item.width;
							h = item.height;
						}
						item.width = w;
						item.height = h;
						if(imgs.length) {
							if(item.preview) {
								item.removeEventListener('click',item.preview);
							}
							item.preview = () => {
								ownerInstance.callMethod('preview',{
									urls: imgs,
									index: i
								})
							}
							item.addEventListener('click',item.preview)
						}
					}
				}
				
				if(urlEles.length) {
					for (let i = 0; i < urlEles.length; i++) {
						let item = urlEles[i];
						let url = item.dataset.url;
						item.addEventListener('click',() => {
							ownerInstance.callMethod('clickLink',url)
						})
					}
				}
				
				if(atEles.length) {
					for (let i = 0; i < atEles.length; i++) {
						let item = atEles[i];
						let user = JSON.parse(item.dataset.user);
						if(item.at) {
							item.removeEventListener('click',item.at);
						}
						item.at = () => {
							ownerInstance.callMethod('clickAt',user)
						}
						item.addEventListener('click',item.at)
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.comment /deep/ .u-sticky {
		top: 0 !important;
	}
	
	.comment { 
		margin-top: 20rpx;
		background-color: #fff;
		
		&__head {
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #eee;
			background-color: #fff;
			
			&--left {
				display: flex;
			}
			
			&--right {
				display: flex;
				justify-content: space-around;
				align-items: center;
				width: 300rpx;
				
				&-item {
					width: 80rpx;
					color: #aaa;
					text-align: center;
				}
			}
		}
	}
	
	.comment-card {
		display: flex;
		padding-top: 20rpx;
		position: relative;
		max-width: 100%;
		overflow: hidden;
		user-select: text;
		word-break: break-all;
		
		&__jiedian {
			position: absolute;
			top: -50px;
		}
		
		&__set {
			position: absolute;
			right: 40rpx;
			top: 20rpx;
			width: 30rpx;
			height: 30rpx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		
		&__left {
			width: 100rpx;
			
			&--avator {
				width: 70rpx;
				height: 70rpx;
				margin: 0 20rpx;
			}
		}
		
		&__right {
			width: calc(100% - 138rpx);
			border-bottom: 1rpx solid #eee;
			padding-bottom: 20rpx;
			
			&--name {
				font-size: 26rpx;
				color: #888888;
			}
			
			&--floor {
				font-size: 26rpx;
				color: #aaa;
			}
			
			&--content {
				padding-top: 10rpx;
				padding-bottom: 20rpx;
				max-width: 100%;
				overflow: hidden;
				font-size: 37rpx;
			}
			
			&--bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				&__left {
					font-size: 25rpx;
					color: #aaa;
				}
				
				&__right {
					display: flex;
					justify-content: space-around;
					width: 250rpx;
					margin-right: 20rpx;
					
					&--item {
						display: flex;
						align-items: center;
						
						image {
							width: 30rpx;
							height: 30rpx;
							margin-right: 10rpx;
						}
						view {
							font-size: 25rpx;
							color: #aaa;
						}
					}
				}
			}
		}
	}
	
	.replay {
		padding: 10rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		background-color: #eee;
		border-radius: 10rpx;
		
		&__item {
			font-size: 30rpx;
			word-break: break-word;
			
			&--create-user {
				color: #5797cc;
			}
			
			&--receive-user {
				color: #5797cc;
			}
		}
		
		&__more {
			color: #aaa;
			font-size: 30rpx;
			margin-top: 10rpx;
		}
	}
	
	
	
	.sub1 {
		border-left: 1rpx solid #eee;
		border-right: 1rpx solid #eee;
	}
	
	.sub-active {
		color: #000;
	}
	
	.set-pop {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9999999;
		
		&__head {
			height: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			padding-left: 20rpx;
			box-sizing: border-box;
			line-height: 100rpx;
			background-color: #fff;
		}
		
		&__body {
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
		}
		
		&__bottom {
			height: 100rpx;
			background-color: #eee;
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 100rpx;
		}
		
		&__bottom:hover {
			color: #aaa;
		}
	}
	
	.set-pop__item {
		width: 100rpx;
		height: 130rpx;
		margin-right: 20rpx;
		
		&--icon {
			width: 80rpx;
			height: 80rpx;
			margin: 0 10rpx;
			border-radius: 50%;
			background-color: #eee;
			text-align: center;
			line-height: 100rpx;
			
			image {
				width: 50%;
				height: 50%;
			}
		}
		
		&--text {
			font-size: 25rpx;
			color: #aaa;
			margin-top: 10rpx;
			text-align: center;
		}
	}
	
	.owner {
		color: #fff;
		background-color: orange;
		display: inline-block;
		padding: 0 4rpx;
		border-radius: 5rpx;
		font-size: 25rpx;
		height: 32rpx;
		line-height: 32rpx;
		margin-left: 8rpx;
	}
	
	.bg-active {
		animation: bgChange 1.5s;
		animation-delay: 0.3s;
	}
	
	@keyframes bgChange {
		0%   {
			background: #fff;
		}
		50%  {
			background: rgba(236,252,170,.6);
		}
		100% {
			background: #fff;
		}
	}
	
	.more {
		font-size: 33rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		color: deepskyblue;
		
		&:hover {
			color: #aaa;
		}
	}
	
	.no-more {
		height: 100rpx;
		font-size: 25rpx;
		text-align: center;
		line-height: 100rpx;
		color: #aaa;
	}
	
	.link {
		width: 400rpx;
		background-color: #fff;
		
		&__item {
			height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			line-height: 100rpx;
			color: #999;
		}
	}
	
	.comment-card__right--content /deep/ .img {
		border-radius: 10rpx;
		margin-right: 10rpx;
		opacity: 0;
	}
	
	.replay__item--content /deep/ .comment-jxp {
		width: 60rpx !important;
		height: 60rpx !important;
	}
</style>
